<template>
		<view class="customer">
			<view class="waiterT">
			</view>
			<!-- 电话 -->
			<view class="phone"  @tap="tel()">
				<view class="phone_wz">
				咨询电话:	<span>{{message.tel}}</span>
				</view>
				<view class="phone_icon"></view>
			</view>
			<!-- 微信号 -->
			<view class="wx">
				<view class="wx_left">
					微信号
				</view>
				<view class="wx_right">
					{{message.wechat}}
				</view>
			</view>
			<!-- 二维码 -->
			<view class="erweima">
				<image :src=message.qrcode mode=""></image>
			</view>
			<view class="distinguish">
				<text>长按识别图中二维码联系客服</text>
			</view>
			<view class="time">
				<image src="../../static/customerService/time02.png" mode=""></image>
				<span>客服上班时间：</span> <span>上午{{message.start_time}}至下午{{message.end_time}}</span>
			</view>
			<web-load v-if="loading"></web-load>
		</view>
</template>

<script>
	import webLoad from '../../components/unit/loading.vue';
	export default {
		components:{ webLoad },
		data() {
			return {
				loading:true,
				message:{}
			}
		},
		onLoad() {
			this.getMessage()
		},
		methods: {
			getMessage() {
				this.ajax('custom/getcustom',{
					success: (res) => {
						this.message  = res.msg
						console.log(this.message)
						this.loading=false;
					}
				})
			},
			tel(){
				window.location = 'tel:'+this.message.tel;
			},
		}
	}
</script>

<style lang="scss">
	/* .ht {
		background-color: #999;
		width: 100%;
		height: 100%;
	} */
	page {
		background-color: #F2F2F2;
		display: flex;
		justify-content: center;
		padding:100upx 60upx ;
	}
	.customer {
		width: 100%;
		// width: 604upx;
		height: 920upx;
		// height: 100%;
		background:rgba(255,255,255,1);
		// background-color: red;
		box-shadow:0px 2px 17px 1px rgba(215, 216, 215, 0.35);
		border-radius:20px;
		// margin-top: 100upx;
		padding-top: 40upx;
		box-sizing:border-box;
		.waiterT {
			width: 132upx;
			height: 138upx;
			background: url('../../static/customerService/waiterT02.png') no-repeat;
			background-size: 100%;
			margin: 0 auto;
		}
	}
	 .phone {
		display:flex;
		justify-content:center;
		align-items: center;
		padding-top:46upx;
		.phone_wz {
			font-size: 28rpx;
			color: #999999;
			span {
				padding: 0 8upx 0 20upx;
			}
		}
		.phone_icon {
			width: 24rpx;
			height: 26rpx;
			background: url('../../static/customerService/mobile02.png') no-repeat;
			background-size: 100%;
		}
	}
	.customer .wx {
		display: flex;
		justify-content: center;
		margin: 20upx 0;
		.wx_left {
			width: 110upx;
			height: 48upx;
			background-color: #D51519;
			font-size: 28upx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family:PingFang SC;
			font-weight:500;
		}
		.wx_right {
			width: 188rpx;
			height: 48rpx;
			background-color: #C1C1C1;
			font-size: 28upx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family:PingFang SC;
			font-weight:500;
		}
	}
	.customer .erweima {
		width: 322upx;
		height: 322upx;
		// background-color: #D7D7D8;
		box-shadow:0px 2px 17px 1px rgba(215, 216, 215, 0.35);
		margin: 40upx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			width: 290upx;
			height: 290upx;
			// background-color: #007AFF;
		}
	}
	.customer .distinguish {
		display:flex;
		justify-content:center;
		text{
			font-size:28upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(153,153,153,1);
		}
	
	}
	.customer .time {
		margin-top: 50upx;
		display:flex;
		justify-content:center;
		align-items:center;
		image {
			width: 26upx;
			height: 26upx;
			margin-right: 8upx;
		}
		span {
			font-size: 24upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(193,193,193,1);
		}
	}
</style>
